<template>
  <div class="saying_page">
      <Card :padding="0" shadow style="width: 300px;padding:0 0 20px  0;">
            <p slot="title">
                <Icon type="ios-book" />
                语录
            </p>
            <Scroll :on-reach-bottom="handleReachBottom" loading-text='加载中...' :distance-to-edge='5'>
                <Card dis-hover v-for="(item, index) in list1" :key="index" style="margin: 10px 10px">
                    {{ item }}
                 </Card>
            </Scroll>
        </Card>
  </div>
</template>

<script>
 export default {
        data () {
            return {
                page:0,
                limit:5,
                total:0,
                list1: []
            }
        },
        methods: {
            handleReachBottom () {
                return new Promise(resolve => {
                    setTimeout(() => {
                        if(this.list1.length == this.total){
                            this.$Message.info('已全部加载完毕')
                        }else{
                            this.page++;
                            this.init()
                        }
                        resolve();
                    }, 2000);
                });
            },
            init(){
                this.$axios.get('/api/manage/saying/get',{params:{page:this.page,limit:this.limit}}).then(res =>{
                    if(res.data.err_code == 2){
                        this.total = res.data.total
                        res.data.data.forEach(item => {
                            this.list1.push(item.saying)
                        });
                    }
                })
            }
        },
        mounted(){
            this.init()
        }
    }
</script>

<style scoped>
   
</style>>

</style>